<template>
  <div class="popover">
      <div class="music-edit">
            <div class="choose-music">
            <div class="slide cursor-pointer" @click="prevPage">
                <i class="iconfont icon-arrow-left-bold arrow"></i>
            </div>
            <div class="music-img">
                <div class="music-item cursor-pointer" 
                    :class="{ active: item.voiceId == pickMusic.voiceId }"
                    @click="selectPickMusic(item)"
                    v-for="item in voiceShowList" :key="item.voiceId">
                    <div class="img-box">
                        <img :src="item.imgUri" alt="alt" class="img">
                    </div>
                    <div class="name">{{ item.title }}</div>
                </div>
            </div>
            <div class="slide cursor-pointer" @click="nextPage">
                <i class="iconfont icon-arrow-right-bold arrow"></i>
            </div>
          </div>
          <div class="divider"></div>
          <div class="slider-wrapper" 
                v-for="item in sliderData" :key="item.field">
            <label>{{ item.lable }}</label>
            <div class="music-slider">
                <input type="range" 
                    :min="item.min"
                    :max="item.max"
                    :step="item.step"
                    v-model="musicCfg[item.field]"
                >
            </div>
            <span class="value" :id="item.field">{{ musicCfg[item.field] }}</span>
          </div>
      </div>
  </div>
</template>

<script lang="ts" setup name="MusicEdit">
import { Voice, SliderData, MusicConfig } from '../utils/common/voice'
import { ref } from 'vue';

// NOTE 调配语速、语调、音量
const musicCfg = ref<MusicConfig>(props.musicConfig); 
const pickMusic = ref<Voice>(props.pickMusic);
const voiceShowList = ref<Array<Voice>>();

// eslint-disable-next-line no-undef
const props = defineProps({
    pickMusic: {
        type: Voice,
        default: null,
    },
    musicConfig: {
        type: MusicConfig,
        default: {
            speechRate: 0,
            pitchRate: 0,
            volume: 50,
        }
    },
    pickMusicList: {
        type: Array as Array<Voice>,
        default: null,
    },
});

const sliderData: SliderData[] = [
  {
    field: 'speechRate',
    lable: '语速',
    min: -500,
    max: 500,
    step: 10,
  },
  {
    field: 'pitchRate',
    lable: '语调',
    min: -500,
    max: 500,
    step: 10,
  },
  { 
    field: 'volume', 
    lable: '音量', 
    min: 1, 
    max: 100,
    step: 1,
  },
];

// NOTE 计算当前选择的音色对应的三个音色选项，渲染选项
const getVoiceShowList = (index)=> {
    if(index === void 0) { // 没传参 undefined
        index = props.pickMusicList.indexOf(pickMusic.value);
    }
    const firstIndex = Math.floor(index / 3) * 3;
    const lastIndex = firstIndex + 2 >= props.pickMusicList.length? 
                        props.pickMusicList.length - 1: firstIndex + 2;
    const voiceShowList = props.pickMusicList.filter((item, index)=> {
        return index >= firstIndex && index <=lastIndex;
    });
    return voiceShowList;
};
voiceShowList.value = getVoiceShowList();


// NOTE 前一页 & 后一页
const prevPage = ()=> {
    const index = props.pickMusicList.indexOf(voiceShowList.value[0]);
    const firstIndex = Math.floor(index / 3) * 3;
    if(firstIndex === 0) return; // 当前已是第0页，不用再往前找了

    voiceShowList.value = getVoiceShowList(firstIndex - 3);
}
const nextPage = ()=> {
    const voiceShowListLength = voiceShowList.value.length;
    const index = props.pickMusicList.indexOf(voiceShowList.value[voiceShowListLength -1]);
    if(index === props.pickMusicList.length -1) return; // 最后一页了
    const firstIndex = (Math.floor(index / 3) + 1) * 3;
    voiceShowList.value = getVoiceShowList(firstIndex);
}

// NOTE 选择音色
// eslint-disable-next-line no-undef
const emits = defineEmits(['select-pickMusic']);
const selectPickMusic = (pm)=> {
    pickMusic.value = pm;
    emits('select-pickMusic', pm);
};
</script>
<style scoped>
.popover {
    z-index: 2028;
    width: auto;
    position: absolute;
    inset: 185px auto auto 5px;
    background: #fff;
    min-width: 150px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    padding: 12px;
    color: #606266;
    line-height: 1.4;
    text-align: justify;
    font-size: 14px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    word-break: break-all;
    box-sizing: border-box;
    top: 76px;
    left: 130px;
}
.music-edit {
    width: 346px;
    padding: 20px 0;
    margin: -12px;
}
.choose-music {
    width: 100%;
    display: flex;
}
.cursor-pointer {
    cursor: pointer;
}
.divider {
    width: 286px;
    height: 1px;
    background: #eee;
    margin: 20px 30px;
}
.choose-music .slide {
    width: 28px;
    height: 112px;
    border-radius: 50px;
    display: flex;
    margin: 0 9px;
    align-items: center;
}
.choose-music .slide .arrow {
    font-size: 22px;
    color: #ddd;
}
.choose-music {
    width: 100%;
    display: flex;
}
.slider-wrapper {
    display: flex;
    align-items: center;
    margin: 0 30px;
}
.slider-wrapper .music-slider {
    margin: 0 6px 0 14px;
    flex: 1;
}
.slider-wrapper .music-slider input {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.slider-wrapper .value {
    width: 34px;
    text-align: right;
    color: #4d5ef9;
}
.choose-music .music-img {
    width: 266px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: all 4s ease-in-out;
}
.choose-music .music-img .music-item {
    position: relative;
    width: 82px;
    height: 112px;
    border-radius: 8px 8px 8px 8px;
    padding: 14px 10px;
    margin-right: 10px;
    outline: 1px solid #eee;
    background: #fff;
    box-sizing: border-box;
    user-select: none;
}
.choose-music .music-img .music-item .img-box {
    width: 62px;
    height: 62px;
    border: 4px solid rgba(99, 92, 246, 0.1);
    border-radius: 50%;
}
.choose-music .music-img .music-item .img-box .img {
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #eee;
}
.choose-music .music-img .music-item .name {
    text-align: center;
    margin-top: 8px;
    font-size: 14px;
    color: #333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.choose-music .music-img .active {
    outline: 2px solid rgba(99, 92, 246, 0.4);
    background: rgba(99, 92, 246, 0.05);
}
</style>
